<template>
  <div class="mainDiv">
    <div class="infoNav">
      <div class="myself">
        <el-avatar :size="50" :src="defaultSrc" class="avatar"></el-avatar>
        <span >{{ username }}</span>
        <el-tag class="tagInfo" type="info">已打卡</el-tag>
      </div>
      <div class="nav2">
        <div class="conDay">
          <div>
            <div class="nav2_first">{{ conDay }}</div>
          </div>
          <div>
            <div class="nav2_second">已连续打卡</div>
          </div>
        </div>
        <div class="allDay">
          <div>
            <div class="nav2_first">{{ allDay }}</div>
          </div>
          <div>
            <div class="nav2_second">记账总天数</div>
          </div>
        </div>
        <div class="allNum">
          <div>
            <div class="nav2_first">{{ allNum }}</div>
          </div>
          <div>
            <div class="nav2_second">记账总笔数</div>
          </div>
        </div>
      </div>
      <div class="card1">
        <div class="function">
          <div>
            <img class="pic"/>
          </div>
          <div>
            <div class="span1">消息</div>
          </div>
        </div>
        <div class="function">
          <div>
            <img class="pic"/>
          </div>
          <div>
            <div class="span1">徽章</div>
          </div>
        </div>
        <div class="function">
          <div>
            <img class="pic"/>
          </div>
          <div>
            <div class="span1">设置</div>
          </div>
        </div>
      </div>
      <div class="card2">
        <div class="card2_fun">
          <img class="img1"/>
          <span class="text"> 我的账本</span>
          <img class="enter"/>
        </div>
        <div class="card2_fun">
          <img class="img1"/>
          <span class="text"> 家庭账单</span>
          <img class="enter" :src="enterSrc"/>
        </div>

      </div>
      <div class="card2">
        <div class="card2_fun">
          <img class="img1"/>
          <span class="text"> 设置</span>
          <img class="enter" :src="enterSrc"/>
        </div>
        <div class="card2_fun">
          <img class="img1" />
          <span class="text"> 账号安全中心</span>
          <img class="enter" :src="enterSrc"/>
        </div>
        <div class="card2_fun">
          <img class="img1" />
          <span class="text"> 使用帮助</span>
          <img class="enter" :src="enterSrc"/>
        </div>
        <div class="card2_fun">
          <img class="img1" />
          <span class="text"> 意见反馈</span>
          <img class="enter" :src="enterSrc"/>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import router from "@/router";

export default {
  data() {
    return {
      src: require("@/assets/icons/otherIcon/avatar.png"),
      size: '50',
      defaultSrc: require("@/assets/icons/otherIcon/avatar.png"),
      enterSrc: require("@/assets/icons/otherIcon/avatar.png"),
      username: "9999",
      conDay: 1,
      allDay: 200,
      allNum: 30,
    }
  },

  methods: {
    changeTheme() {
      router.push("/themeInfo");
    },

  }
}


</script>
<style scoped>
.myself {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: flex-start; /* 水平居中距左 */
  margin-top: 20px;
}

.avatar {
  margin-left: 40px;
  margin-right: 30px;
}

.tagInfo {
  margin-left: auto;
  margin-right: 30px;
}

.nav2 {
  display: flex;
  flex-wrap: wrap; /* 允许项目在容器中换行 */
  justify-content: space-around; /* 均匀分布项目 */
  align-items: center; /* 垂直居中对齐项目 */
  margin-top: 20px;
}

.nav2_second {
  width: 120px;
  color: white;
}

.nav2_first {
  color: white;
}

.card1 {
  z-index: 999;
  width: 90%;
  height: 70px;
  background-color: white;
  margin: 20px auto;
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap; /* 允许项目在容器中换行 */
  justify-content: space-around; /* 均匀分布项目 */
  align-items: center; /* 垂直居中对齐项目 */
}

.card1 .function {
  height: 80px;
}

.card1 .function .pic {
  height: 30px;
  width: 30px;
  margin-top: 10px;
}

.card2 {
  z-index: 999;
  width: 90%;
  background-color: white;
  margin: 20px auto;
  border-radius: 6px;
}


.card2_fun {
  height: 45px;
  position: relative; /* 添加相对定位 */
}

.card2_fun:after {
  content: "";
  display: block;
  width: 70%;
  height: 1px; /* 横线的厚度 */
  background-color: #c7c4c4; /* 横线的颜色 */
  position: absolute; /* 绝对定位 */
  bottom: 0; /* 定位在底部 */
  margin-left: 50px;
}

.card2_fun:last-child:after {
  /* 最后一个div不需要横线 */
  content: none;
}

.img1 {
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 15px;
  line-height: 45px;
  margin-top: 6px;
}

.text {
  margin-left: 15px;
  float: left;
  line-height: 45px;
}

.enter {
  height: 30px;
  float: right;
  width: 30px;
  margin-right: 15px;
  color: #999999;
  line-height: 30px;
  margin-top: 6px;
}

</style>